<template>
  <ElCard :bordered="false" class="card-wrapper">
    <ElRow :gutter="16">
      <ElCol :sm="12" :md="8" :lg="6" :xxl="4">
        <!-- cpu占用 -->
        <RingChart v-model:progress="useInfo.cpuRate" title="cpu占用率" :content="`cpu核心数:${useInfo.cpuCoreCount}`">
        </RingChart>
      </ElCol>

      <ElCol :sm="12" :md="8" :lg="6" :xxl="4">
        <!-- 内存占用 -->
        <RingChart v-model:progress="useInfo.ramRate" :total="useInfo.totalRam" title="内存占用率"
          :content="`${useInfo.useRam}GB/${useInfo.totalRam}GB`"></RingChart>
      </ElCol>

    </ElRow>
  </ElCard>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import RingChart from './ring-chart.vue';
import { SystemserviceApi } from '@/api-services/apis/systemservice-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { MachineUseInfo } from '@/api-services';
import { onBeforeRouteLeave } from 'vue-router';

// const cpuProgress = ref(15);

const useInfo = ref<MachineUseInfo>({

})
const getMachineUseInfo = async () => {
  const [err, res] = await feature(getAPI(SystemserviceApi).getMachineUseInfo());
  queryDone(err, () => {
    if (res?.data.data) {
      useInfo.value = res?.data.data;
    }
  }, () => {

  });
}
let interval: NodeJS.Timeout | null = null;
onMounted(() => {
  getMachineUseInfo();
  interval = setInterval(() => {
    getMachineUseInfo();
  }, 3000);
})
onBeforeRouteLeave(() => {
  if (interval) {
    clearInterval(interval);
  }
})
</script>

<style scoped></style>
